<template>
  <view class="table-info-container">
    <TableCode
      ref="tableCode"
      :code="tableInfo.tableCode"
      :area-name="areaName"
    />
    <Form ref="form" :model="formData" :rules="rules">
      <FormItem label="桌台名称" text-align="right">
        <input
          v-model="formData.tableNo"
          type="text"
          placeholder="请输入桌台名称"
        />
      </FormItem>
      <FormItem :show-arrow="true" label="桌台人数" text-align="right">
        <!-- <input v-model.number="formData.capacity" type="number" placeholder="请输入店铺名称" /> -->
        <picker @change="handleChangeCapacity" :range="personNums">
          <view class="uni-input">{{ formData.capacity }}</view>
        </picker>
      </FormItem>
      <FormItem :show-arrow="true" label="所属区域" text-align="right">
        <picker @change="handleChangeGroup" :range="groupNames">
          <view class="uni-input">{{ groupName }}</view>
        </picker>
      </FormItem>
      <FormItem
        :show-arrow="true"
        label="保存二维码"
        text-align="right"
        @click.native="saveCode"
      ></FormItem>
      <FormItem
        :show-arrow="true"
        label="打印二维码"
        text-align="right"
        @click.native="handleClickPrint"
      ></FormItem>
    </Form>
    <FooterButton @click.native="handleSave">保存</FooterButton>
  </view>
</template>

<script>
import Form from "@/components/public/Form/index.vue";
import FormItem from "@/components/public/FormItem/index.vue";
import FooterButton from "@/components/public/Button/FooterButton.vue";
import TableCode from "./components/TableCode.vue";
import { qrCodeData } from "../../utils/printerData";
import { mapState, mapGetters, mapActions } from "vuex";
import global from "../../config/global";
import { base64ToPath } from "image-tools";
import { qrcodeBaseUrl } from "@/config/index";
export default {
  components: { Form, FormItem, FooterButton, TableCode },
  data() {
    return {
      formData: {
        tableNo: null,
        capacity: null,
        // tablePay: null,
        groupId: null,
        id: null,
        // desc: null
      },
      personNums: [], // 人数选择array
      rules: {
        tableNo: { required: true, message: "请填写桌台名称" },
      },
    };
  },
  computed: {
    ...mapState({
      tableInfo: (state) => state.table.tableInfo,
      groupList: (state) => state.table.groupList,
    }),
    ...mapGetters({
      bleList: "bleList",
      shopId: "shopId",
    }),
    // 所有的分组名
    groupNames() {
      return this.groupList.map((v) => v.name);
    },
    // 当前分组名
    groupName() {
      let group = this.groupList.find((v) => v.id == this.formData.groupId);
      return group ? group.name : "请选择所属区域";
    },
    groupIndex() {
      let index = this.groupList.findIndex(
        (v) => v.id == this.formData.groupId
      );
      return index;
    },
    areaName() {
      return `${this.groupName}-${this.formData.tableNo}`;
    },
  },
  onLoad() {
    this.init();
  },
  onNavigationBarButtonTap(data) {
    // this.search();
    // console.log(data);
    this.handleDelete();
  },
  methods: {
    ...mapActions({
      deleteTables: "deleteTables",
      putTables: "putTables",
    }),
    init() {
      let tableInfo = this.$deepStr(this.tableInfo);
      for (const key in this.formData) {
        if (tableInfo.hasOwnProperty(key)) {
          this.formData[key] = tableInfo[key];
        }
      }
      for (let index = 0; index < 100; index++) {
        this.personNums.push(index + 1);
      }
    },
    handleChangeGroup(e) {
      let index = e.detail.value;
      this.formData.groupId = this.groupList[index].id;
    },
    handleChangeCapacity(e) {
      let index = e.detail.value;
      this.formData.capacity = Number(this.personNums[index]);
    },
    // 删除
    handleDelete() {
      uni.showModal({
        title: "提示",
        content: "确认删除该桌台？",
        success: (res) => {
          if (res.confirm) {
            this.deleteTables(this.formData).then((res) => {
              if (!res.code) {
                this.$back();
              }
            });
          }
        },
      });
    },
    // 更新
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.putTables(this.formData).then((res) => {
            if (!res.code) this.$back();
          });
        }
      });
    },
    saveCode() {
      this.$refs.tableCode.saveCode();
    },
    handleClickPrint() {
      if (this.bleList.length > 1) {
        uni.showActionSheet({
          itemList: this.bleList.map((v) => v.name),
          success: (res) => {
            this.printerCode(this.bleList[res.tapIndex]);
          },
          fail: (res) => {
            console.log(res.errMsg);
          },
        });
      } else {
        this.printerCode(this.bleList[0]);
      }
    },
    printerCode(bleInfo) {
      let sizes = [];
      for (let i = 0; i < 5; i++) {
        sizes.push(i);
      }
      uni.showActionSheet({
        itemList: sizes,
        success: (res) => {
          let size = sizes[res.tapIndex];

          let buff = qrCodeData(
            `${qrcodeBaseUrl}/?sid=${this.shopId}&tableId=${this.tableInfo.tableId}`
          );
          this.$printerUtil.print({
            ...bleInfo,
            num: size,
            buff: buff,
            success: (res) => {
              this.$toast("打印成功");
            },
            fail: (fail) => {
              console.log(fail);
            },
          });
        },
        fail: function (res) {
          console.log(res.errMsg);
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
.table-info-container {
  padding-bottom: 100rpx;
}
</style>
